import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../store/actions/Home'
class Home extends Component {
  static loadData = (store) => {
    //https://github.com/reduxjs/redux/blob/master/src/createStore.js
    return store.dispatch(actions.getList())
  }
  ////componentDidMount在服务器端是不执行的
  componentDidMount() {
    // 如果服务端已经获取了数据，就不需要客户端这边在次获取了
    if (!this.props.list.length) {
      this.props.getList();
    }
  }
  render() {
    return <div className="row">
      <div className="col-md-12">
        <ul className="list-group">
          {
            this.props.list.map(item => (
              <li className="list-group-item" key={item.id}>{item.name}</li>
            ))
          }
        </ul>
      </div>
    </div>
  }
}
// 此方法用来异步加载数据，用这个方法可以加载数据并且放到仓库中
// Home.loadData = function (store) {
//   // dispatch方法的返回值就是派发的action，最终返回的是一个promise
//   return store.dispatch(actions.getList())
// }
export default connect(state => state.home, actions)(Home)